<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>DataTables Bootstrap 3 示例</title>

    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/foundation/dataTables.foundation.css">
    <!--<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">-->
    <!--<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css">-->
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type='text/javascript' src='http://cdn.datatables.net/plug-ins/28e7751dbec/integration/foundation/dataTables.foundation.js' charset='utf-8'></script>

    <!--<script>var jq= $.noConflict()</script>-->
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10-dev/js/jquery.dataTables.min.js"></script>


    <!--<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>-->

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
</head>
<body>

<div class="device-content">
    <header class="bar bar-nav">
        <a href="#" onclick="window.history.back(); return false;" class="icon icon-left pull-left">
            返回
        </a>
        <h1 class="title">名额申请记录</h1>
    </header>
    <table id="table_id_example" cellspacing="0" width="100%">

    </table>
</div>

<!--<div class="header">-->
    <!--<div class="nav">-->
        <!--<a href="#" onclick="window.history.back(); return false;"><img src="/image/＜@2x.png" alt=""></a>-->
        <!--<span class="page-title">名额申请记录</span>-->
    <!--</div>-->
<!--</div>-->
<!--<input type="search" placeholder="终止时间" class="timeEnd"  style="float: right">-->
<!--<input type="search" placeholder="起始时间" class="timeStart"  style="float: right">-->

<!--<input type="search" placeholder="最小金额" class="moneyMin" style="float: right">-->
<!--<input type="search" placeholder="最大金额" class="moneyMax" style="float: right">-->
<!--<button type="button" style="float: right" id="query">查询</button>-->

</body>
<script type="text/javascript">

    var table=null;

    $(document).ready( function () {

     table= $('#table_id_example').DataTable( {
            "ajax":
                {
                    "url": "/quota_apply_agency/queryData",
                    "type": "POST",

                },
            "scrollX": true,
            "sPaginationType" : "simple_numbers",
            "iDisplayLength": 20,
            "aLengthMenu" : [20, 40, 60],
            "paging":true,
            "searching":false,
            "serverSide": true,
            "bLengthChange": false,
            "ordering": false,
             "language": {
                 "sProcessing": "处理中...",
                 "sLengthMenu": "显示 _MENU_ 项结果",
                 "sZeroRecords": "没有匹配结果",
                 "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                 "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                 "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                 "sSearch": "搜索:",
                 "sEmptyTable": "表中数据为空",
                 "sLoadingRecords": "载入中...",
                 "oPaginate": {
                     "sFirst": "首页",
                     "sPrevious": "上页",
                     "sNext": "下页",
                     "sLast": "末页"
                 }
             },
            "aoColumns": [
                { "mData": "levelName","title":"等级"},
                // { "mData": "quantity","title":"数量"},
                { "data": function (data) {
                        return '<div class="align_center">'+data.quantity+'</div>'},"title":"数量"},
                { "data": function (data) {
                        return '<div class="align_center">'+data.status+'</div>'},"title":"状态"},
                { "mData": "createdTime","title":"申请时间"}

        ],
        });
    });

    $('#query').click(function (){
        console.log('123');
        table.ajax.url( '/order/queryData' ).load();
    })

</script>
<style type="text/css">

    body{
        padding-top:2.2rem;
    }
    th, td { white-space: nowrap; }
    #table_id_example th {
        text-align: center;
    }
   .align_center {
       text-align: center;
    }
  </style>
</html>
